<template>
    <div>
        <Header />
        <el-container class="container">
            <el-main class="main">
                <el-carousel :interval="5000" arrow="always" height="480px">
                    <el-carousel-item>
                        <el-image style="width: 100%" src="https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/Booth/Yb4FIZMJipdR.png?imageMogr2/cut/1920x640" fit="contain" />
                    </el-carousel-item>
                    <el-carousel-item>
                        <el-image style="width: 100%" src="https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/Booth/Yb4FIZMJipdR.png?imageMogr2/cut/1920x640" fit="contain" />
                    </el-carousel-item>
                    <el-carousel-item>
                        <el-image style="width: 100%" src="https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/Booth/Yb4FIZMJipdR.png?imageMogr2/cut/1920x640" fit="contain" />
                    </el-carousel-item>
                </el-carousel>

                <el-row class="frontend-infos nav">
                    <el-col :span="6">
                        <el-card shadow="always">
                            <p><span class="nav-num">300</span>+讲师</p>
                            <p>大厂背景 项目成功经验</p>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="always">
                            <p><span class="nav-num">1000</span>+课程</p>
                            <p>知识全面</p>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="always">
                            <p><span class="nav-num">20W</span>+用户</p>
                            <p>首选学习平台</p>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="always">
                            <p><span class="nav-num">3000</span>+资料</p>
                            <p>多种资料参考</p>
                        </el-card>
                    </el-col>
                </el-row>

                <div class="frontend-infos">
                    <el-row :gutter="10">
                        <el-col :span="12"><h3 class="tip">精选课程</h3></el-col>
                        <el-col :span="12" class="text-right"><el-link @click="onLink('course',0)">更多 ></el-link></el-col>
                    </el-row>
                    <el-row :gutter="30" class="course-list">
                        <el-col :span="6" v-for="item in Course" :key="item.id">
                            <el-card class="cp" shadow="always" @click="onLink('courseShow',item.id)">
                                <el-image style="width: 100%" :src="item.cover" fit="contain" />
                                <div v-if="item.tag" class="text-right" style="height: 8px;"><el-tag type="warning" effect="dark" class="course-tag">{{ item.tag }}</el-tag></div>
                                <div class="title line-clamp2"><el-text size="large" tag="b">{{item.title}}</el-text></div>
                                <div class="brief line-clamp2"><el-text>{{item.brief}}</el-text></div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <div class="frontend-infos">
                    <el-row :gutter="30">
                        <el-col :span="12"><h3 class="tip">精彩直播</h3></el-col>
                        <el-col :span="12" class="text-right"><el-link @click="onLink('course',0)">更多 ></el-link></el-col>
                    </el-row>
                    <el-row :gutter="30" class="course-list">
                        <el-col :span="6" v-for="item in Course" :key="item.id">
                            <el-card class="cp"  shadow="always" @click="onLink('courseShow',item.id)">
                                <el-image style="width: 100%" :src="item.cover" fit="contain" />
                                <div class="text-right" style="height: 8px;"><el-tag type="warning" class="live-tag">正在直播</el-tag></div>
                                <div class="title line-clamp2"><el-text size="large" tag="b">{{item.title}}</el-text></div>
                                <div class="brief line-clamp2"><el-text>{{item.brief}}</el-text></div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <div class="frontend-infos">
                    <el-row :gutter="30">
                        <el-col :span="12"><h3 class="tip">资讯</h3></el-col>
                        <el-col :span="12" class="text-right"><el-link @click="onLink('posts',0)">更多 ></el-link></el-col>
                    </el-row>
                    <el-card shadow="always" class="mt20">
                        <el-row :gutter="30" class="posts-list" >
                            <el-col :span="12" >
                                <div v-for="(item,index) in Post" :key="item.id">
                                    <el-row class="cp"  :gutter="30" v-if="index % 2 === 1" @click="onLink('postsShow',item.id)">
                                        <el-col :span="2"><div><el-image style="width: 42px;border-radius: 3px;" :src="item.cover" fit="contain" /></div></el-col>
                                        <el-col :span="22"><div class="line-clamp1"><el-link class="href">{{item.title}}</el-link></div></el-col>
                                        <el-divider border-style="dashed" />
                                    </el-row>
                                    
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div v-for="(item,index) in Post" :key="item.id">
                                    <el-row class="cp"  :gutter="30" v-if="index % 2 != 1" @click="onLink('postsShow',item.id)">
                                        <el-col :span="2"><div><el-image style="width: 42px;border-radius: 3px;" :src="item.cover" fit="contain" /></div></el-col>
                                        <el-col :span="22"><div class="line-clamp1"><el-link class="href">{{item.title}}</el-link></div></el-col>
                                        <el-divider border-style="dashed" />
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <div class="frontend-infos">
                    <el-row :gutter="30">
                        <el-col :span="12"><h3 class="tip">资料下载</h3></el-col>
                        <el-col :span="12" class="text-right"><el-link @click="onLink('information',0)">更多 ></el-link></el-col>
                    </el-row>
                    <el-card shadow="always" class="mt20">
                        <el-row :gutter="30" class="posts-list" >
                            <el-col :span="12" >
                                <div v-for="(item,index) in Information" :key="item.id">
                                    <el-row class="cp"  :gutter="30" v-if="index % 2 === 1" @click="onLink('informationShow',item.id)">
                                        <el-col :span="2"><div><el-image style="width: 42px;height: 42px;border-radius: 3px;" :src="item.cover" fit="contain" /></div></el-col>
                                        <el-col :span="22"><div class="line-clamp1"><el-link class="href">{{item.title}}</el-link></div></el-col>
                                        <el-divider border-style="dashed" />
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div v-for="(item,index) in Information" :key="item.id">
                                    <el-row class="cp"  :gutter="30" v-if="index % 2 != 1" @click="onLink('informationShow',item.id)">
                                        <el-col :span="2"><div><el-image style="width: 42px;height: 42px;border-radius: 3px;" :src="item.cover" fit="contain" /></div></el-col>
                                        <el-col :span="22"><div class="line-clamp1"><el-link class="href">{{item.title}}</el-link></div></el-col>
                                        <el-divider border-style="dashed" />
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <div class="frontend-infos">
                    <el-row :gutter="30">
                        <el-col :span="12"><h3 class="tip">节点模型</h3></el-col>
                        <el-col :span="12" class="text-right"><el-link @click="onLink('node',0)">更多 ></el-link></el-col>
                    </el-row>
                    <el-row :gutter="30" class="course-list">
                        <el-col :span="4" v-for="item in Node" :key="item.id">
                            <el-card  class="cp" shadow="always" @click="onLink('nodeShow',item.id)">
                                <el-image style="height: 160px;" :src="item.cover" fit="contain" />
                                <div class="title line-clamp2"><el-text size="large" tag="b">{{item.title}}</el-text></div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <div class="frontend-infos">
                    <el-row :gutter="30">
                        <el-col :span="12"><h3 class="tip">产品推荐</h3></el-col>
                        <el-col :span="12" class="text-right"><el-link @click="onLink('product',0)">更多 ></el-link></el-col>
                    </el-row>
                    <el-row :gutter="30" class="course-list">
                        <el-col :span="4" v-for="item in Product" :key="item.id">
                            <el-card  class="cp" shadow="always" @click="onLink('productShow',item.id)">
                                <el-image style="height: 160px;" :src="item.cover" fit="contain" />
                                <div class="title line-clamp2"><el-text size="large" tag="b">{{item.title}}</el-text></div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <div class="frontend-infos">
                    <el-row :gutter="30">
                        <el-col :span="12"><h3 class="tip">岗位内推</h3></el-col>
                        <el-col :span="12" class="text-right"><el-link @click="onLink('hire',0)">更多 ></el-link></el-col>
                    </el-row>
                    <el-table class="mt10" :data="Hire" size="large" style="width: 100%">
                        <el-table-column prop="title" label="岗位名称" />
                        <el-table-column prop="company_name" label="招聘公司"  />
                        <el-table-column prop="salary_type" label="薪资类型"  />
                        <el-table-column prop="location" label="工作地点" />
                    </el-table>
                </div>
            </el-main>
        </el-container>
        <Footer />
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import http from '../util/request'
import { onMounted, ref } from 'vue'
import router from '../router';

const Course = ref<any>([]);
const Live = ref<any>([]);
const Information = ref<any>([]);
const Post = ref<any>([]);
const Product = ref<any>([]);
const Node = ref<any>([]);
const Hire = ref<any>([]);
    

const onGetData = () => {
    http.get('/index').then((response:any)=>{
        Course.value = response.data.data.Course
        Live.value = response.data.data.Live
        Information.value = response.data.data.Information
        Post.value = response.data.data.Post
        Product.value = response.data.data.Product
        Node.value = response.data.data.Node
        Hire.value = response.data.data.Hire
    })
}

const onLink = (name:string,id:number) => {
    if(id > 0){
        router.push({ name: name,params: { id: id }})
        return;
    }
    router.push({ name: name})
}



onMounted(()=>{
    onGetData()
})

</script>

<style scoped lang="scss">
.main {
    padding: 0px;
}
.el-image{border-radius: 5px;}
.frontend-infos {
    padding-bottom: 30px;
    .el-link {
        top: 1px;
    }
}
.nav {
    .el-col {
        padding: 15px;
    }
}

.tip {
    padding: 0px 15px;
}

.nav-num {
    font-size: 50px;
}

.course-list {
    padding: 15px;
    .el-card {
        margin-bottom: 30px;
    }
}

.posts-list {
    padding: 15px;
    .el-card {
        margin-bottom: 30px;
    }
    .el-text{font-size: 1.1rem;line-height: 250%;}
}
.el-divider--horizontal{margin: 5px;}
.course-tag{position: relative;top: -31px;right: 1px;}
.live-tag{position: relative;top: -31px;right: 1px;}
</style>
